<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>墨阅小说</title>
	<link th:href="@{/moyue/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/moyue/css/writer.css}"  rel="stylesheet">
	<link th:href="@{/moyue/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
	<link rel="shortcut icon" th:href="@{/moyue/images/favicon.ico}" type="image/x-icon"/>
</head>
	<body style="color: #EFEFEF;">
		<div class="writer-header">
			<div class="header-navss">
				<div class="log-off">
					<a href="">
						<i class="fa fa-power-off" style="font-size: 30px;"> </i> <span>退出登录</span>
					</a>
				</div>
				<div class="header-left">
					<a th:href="@{/moyue/user/index}" style="color: #E0DEDA;">墨阅</a>
					<a href="" style="color: #2985F6;">作家专区</a>
				</div>
			</div>
		</div>
		<div class="writer-content">
			<div class="writer-sidebar">
				<ul>
					<li>
						<a th:href="@{/moyue/user/writerhtml}">
							<i class="fa fa-home" style="margin-right: 8px;"></i>专区首页
						</a>
					</li>
					<li class="li-act">
						<a th:href="@{/moyue/user/foundhtml}">
							<span class="iconfont" style="margin-right: 8px;">&#xe620;</span>作品私信
						</a>
					</li>
					<li>
						<a th:href="@{/moyue/user/workshtml}">
							<span class="iconfont" style="margin-right: 8px;">&#xe609;</span>创建作品
						</a>
					</li>
				</ul>
			</div>
			<div class="writer-center">
				<div class="writer-top"><a href="novels.html" style="color: black; font-weight: 400;">作品管理</a></div>
				<div class="container" style="width: 1041px; padding-top: 20px;">
					<div class="row clearfix">
						<div class="col-md-12 column">
							<div class="tabbable" id="tabs-97787">
								<ul class="nav nav-tabs">
									<li>
										 <a href="#panel-345497" data-toggle="tab">作品设置</a>
									</li>
									<li class="active">
										 <a href="#panel-208598" data-toggle="tab">新章节 </a>
									</li>
									<li>
										 <a href="#panel-129654" data-toggle="tab">已发布章节</a>
									</li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane" id="panel-345497">
										<div style="padding: 28px 12px 0;">
											<div class="fmBox">
												<div id="box">
													<img id="imgshow" src="" alt=""/>
												</div>
												<div id="pox">
													<input id="filed" type="file" accept="image/*"/>
												</div>
											</div>

											<div class="work-infom">
												<ul>
													<li>
														<span>作品名称: </span>
														<p class="save" id="workname"></p>
														<dt class="section2 none">
															<input type="text" name="" id="bookName1a" value="" />
														</dt>
													</li>
													<li>
														<span>作品类型:</span>
														<p class="save" id="worktype"></p>
														<dt class="section3 none">
															<select class="browsers-id">
																<option th:label="请选择"></option>
																<option th:each="ftype : ${typelist}"  th:label="${ftype.typeName}" th:value="${ftype.typeId}" >

																</option>
															</select>
															<select class="browserson-id">
																<option th:label="请选择"></option>
															</select>
														</dt>
													</li>
													<li>
														<span>作品标签:</span>
														<p class="save" id="worklabel"></p>
														<dt class="section4 none">
															<input type="text" id="tagg"/>
															<input type="hidden"  id="taggid">
														</dt>
														<div id="back1">
															<div class="tab">
																<img th:src="@{/moyue/img/chahao.jpg}" id="xiaoshi1"/>
																<p>作品标签</p>
																<div class="tabulist">
																	<div style="color: #999; font-size: 12px;">请选择最多5个作为您的作品标签，每类中限选一个：</div>
																	<div class="tablist">
																		<ul>
																			<li>
																				<span>风格</span>
																				<div class="tagfilter">
																					<a href="javascript:;" th:each=" labels : ${label}" >
																						<input type="hidden" th:value="${labels.typeId}">
																						<span th:text="${labels.typeName}"></span>
																					</a>
																				</div>
																			</li>
																		</ul>
																	</div>
																	<div class="next-step" id="sure" >
																		<div class="button">确定</div>
																	</div>
																</div>
															</div>
														</div>
													</li>
													<li>
														<span>是否签约</span>
														<p class="save" id="workcont"></p>
														<dt class="section6 none">
															<select id="contracta" >
																<option selected>请选择</option>
																<option value = "1">是</option>
																<option value = "2">否</option>
															</select>
														</dt>
													</li>
													<li>
														<span>作品状态:</span>
														<p class="save">连载</p>
													</li>
													<li>
														<span>作品简介:</span>
														<p class="save" id="workintro"></p>
														<dt class="section5 none" style="position: relative; top: 0;">
															<textarea id="introducea">
																
															</textarea>
															<div class="flisde">20~300个字，修改后1个工作日内审核完毕，审核完毕后7天内不得再次修改</div>
															<div class="found-bottom" style="font-weight: 400;">
																请注意：根据国家相关法律法规要求，请勿上传任何色情、低俗、涉政等违法违规内容，我们将会根据法规进行审核处理和上报。
															</div>
														</dt>
													</li>
													<li>
														<span>字数:</span>
														<p class="save">***</p>
														<dt class="none">
															<div class="next-step" style="position: absolute; top: 54px; left: 154px;">
																<div class="button" id="modify">确定</div>
															</div>
														</dt>
													</li>
												</ul>
												<div class="next-step save" id="step3">
													<div class="button">修改作品设置</div>
												</div>
											</div>
										</div>
									</div>
									<div class="tab-pane active" id="panel-208598">
										<div class="mleftlist">
											<div class="titleBox">
												<p>共<b>***</b>章</p>
											</div>
										</div>
										<div class="mrightlist">
											<div class="titleBox" style=" background-color: #FAFAFA;">
												<div class="conserve">
													<button type="button" class="btn btn-default btn-inverse">
														<span onclick="works()"> <i class="fa fa-floppy-o"></i> <b>发布             </b> </span>
													</button>
													<button type="button" class="btn btn-default btn-inverse">
														<span> <i class="fa fa-trash-o"></i> <b>删除</b> </span>
													</button>
												</div>
											</div>
											<div class="zetext">
												<input type="text" name="" id="booklist" value="" placeholder="此处输入章节号与章节名。示例：“第十章 天降奇缘”"/>
												<div id="editor">

												</div>
											</div>
										</div>
									</div>
									<div class="tab-pane" id="panel-129654">
										<div class="mb20">
											<table border="0" cellspacing="" cellpadding="">
												<thead>
												<tr style="width: 100%;">
													<th width="284px">章节</th>
													<th width="404px">章节名称</th>
												</tr>
												</thead>
												<tbody>
												<tr>
													<th width="284px"></th>
													<th width="404px"></th>
												</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
<script th:src="@{/moyue/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/moyue/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/autor.js}"></script>
<script th:inline="javascript">
    $('.browsers-id').on('change',function (){
        $.ajax({
            type: "POST",//数据发送的方式（post 或者 get）
            url: "/moyue/book/getson",//要发送的后台地址
            data: {
                typeId:$('.browsers-id').val() ,
            },//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
            dataType:"JSON",
            success: function (data) {//ajax请求成功后触发的方法
                if(data.code==0){
                    var datas=data.data;
                    $(".browserson-id").empty();

                    for (var aa in datas){
                        var str = "<option value="+datas[aa].typeId +"  "+ "label=" + datas[aa].typeName + " ></option>";
                        $(".browserson-id").append(str);
                    }
                }else{
                    alert(data.msg);
                }
            },
            error: function (msg) {//ajax请求失败后触发的方法
                alert("网络故障");//弹出错误信息
            }
        });
    })
</script>
<script type="text/javascript" th:inline="javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()

</script>
<script th:inline="javascript">
    /*input 上传图片*/
    //在input file内容改变的时候触发事件
    $('#exampleInputFile').change(function(){
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
        var file = $('#exampleInputFile').get(0).files[0];
        //创建用来读取此文件的对象
        var reader = new FileReader();
        //使用该对象读取file文件
        reader.readAsDataURL(file);
        //读取文件成功后执行的方法函数
        reader.onload=function(e){
            //读取成功后返回的一个参数e，整个的一个进度事
//			    选择所要显示图片的img，要赋值给img的src就是e中target下result里面
            //的base64编码格式的地址
            $('#imgshow').get(0).src = e.target.result;
        }
    })
</script>

</html>
